<!DOCTYPE html>
<html>

<head>
    <!-- <meta charset="utf-8"> -->
    <title>个股涨幅</title>
</head>

<script type="text/javascript" src="./js/kaipanla.js"></script>
<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="./js/jquery.tablesorter.min.js"></script>
<script src="./js/show_message.js"></script>

<script src="./js/kaipanla.js"></script>
<script src="./kpl/com.js"></script>
<!--分时-->
<script src="./kpl/floatMChart.js"></script>
<!--K线-->
<script src="./kpl/floatKChart.js"></script>
<script src="./kpl/fChart.js"></script>

<link type="text/css" rel="stylesheet" href="./css/fupan_css.css">
<link type="text/css" rel="stylesheet" href="./css/calendar.css">
<link type="text/css" rel="stylesheet" href="./kpl/com.css">
<link type="text/css" rel="stylesheet" href="./kpl/fChart.css">
<link type="text/css" rel="stylesheet" href="./kpl/mpage.css">

<body>
    <div class="table-one" style="float:right;width:220px;">
        <div style="position:fixed;">
            <div style="float:left;">
                <label for="meeting">选择日期：</label>
            </div>

            <div style="float:left;">
                <div class="to_left" onclick="οnclick_to_left()"></div>

            </div>
            <div style="float:left;">
                <input id="meeting" type="date" onchange="upperCase(this.id)" />
            </div>

            <div style="float:left;">
                <div class="to_right" onclick="οnclick_to_right()"></div>
            </div>
        </div>
    </div>
    <div class="table-one" style="float:left;width:100%;height:100%;overflow:auto;">
        <table id="table-list-sort" cellspacing="0">
            <thead>
                <tr>
                    <th style="width:68px">股票名称</th>
                    <th style="width:40px">涨幅</th>
                    <th style="width:40px">涨速</th>
                    <th style="width:60px">成交额</th>
                    <th style="width:180px">板块</th>
                </tr>
            </thead>
            <tbody id="table-list"></tbody>
        </table>
    </div>

</body>

<!-- 日期事件 -->
<script type="text/javascript">
    // 左箭头回调函数
    function οnclick_to_left() {
        clearInterval(ID_THREAD)
        dates = document.getElementById("meeting").value
        console.log(dates);
        data = date_history//获取历史日期
        _indexof = data.indexOf(dates, 0) - 1 //匹配索引
        if (-1 == _indexof) {
            return
        }
        if (data.length == _indexof + 1) {
            newStockRanking(data[_indexof], setTable)
        }
        document.getElementById("meeting").value = data[_indexof] //设置日期
        hisStockRanking(data[_indexof], setTable)

    }

    // 右箭头回调函数
    function οnclick_to_right() {
        clearInterval(ID_THREAD)
        dates = document.getElementById("meeting").value
        console.log(dates);
        data = date_history//获取历史日期
        _indexof = data.indexOf(dates, 0) + 1 //匹配索引
        if (data.length == _indexof) {
            return
        }
        document.getElementById("meeting").value = data[_indexof] //设置日期
        //判断是否是最后一个交易日
        if (data.length < _indexof + 1) {
            return
        }
        if (data.length == _indexof + 1) {
            newStockRanking(data[_indexof], setTable)
        } else {
            hisStockRanking(data[_indexof], setTable)
        }


    }

    // 获取历史日期
    function get_history_date() {
        var m_data = []
        $.ajax({
            url: '/get_history_date',
            // data: {data: codes},
            type: 'GET',
            async: false, //异步加载
            dataType: 'json',
            // contentType: 'application/json; charset=UTF-8',
            success: function (data) {
                m_data = data;
                console.log(data);
            },
            error: function (msg) {
                console.log(msg);
            }
        })
        return m_data;
    };

    function upperCase(x) {
        clearInterval(ID_THREAD)
        var dates = document.getElementById(x).value //获取选择的日期
        data = date_history//获取历史日期
        _indexof = data.indexOf(dates, 0) //匹配索引
        //判断是否是最后一个交易日
        if (data.length < _indexof + 1) {
            return
        }
        if (data.length == _indexof + 1) {
            newStockRanking(data[_indexof], setTable)
        } else {
            hisStockRanking(data[_indexof], setTable)
        }

    }
</script>

<!-- 表格排序 -->
<script type="text/javascript">
    $(function () {
        $("#table-list-sort").tablesorter();
    });
</script>

<script type="text/javascript">
    var ID_THREAD = -1
    var date_history = []
    //当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。
    $(document).ready(function () {
        onload();
    });


    function onload() {
        date_history = _date = historyDateEastmoney()
        document.getElementById("meeting").value = date_history[date_history.length - 1] //设置日期
        _date = _date[_date.length - 1]
        newStockRanking(_date, setTable)
        ID_THREAD = self.setInterval("run()", 3000)
        // auto_update(run)
    }

    function run() {
        function get_time() {
            //获取当前时间
            var d = new Date();
            var m_date = d.getHours() + "-" + d.getMinutes() + "-" + d.getSeconds();
            var date = d.getHours() * 60 * 60 + d.getMinutes() * 60 + d.getSeconds()
            // 判断时间是否在开盘时间段
            if (date >= (9 * 60 * 60 + 15 * 60) && date <= (11 * 60 * 60 + 30 * 60) || date >= (13 * 60 * 60) && (15 * 60 * 60) >= date) {
                return true;
            } else {
                return false;
            }
        }
        console.log(new Date().toLocaleString() + ' runing...')
        if (get_time()) {
            _date = historyDateEastmoney()
            _date = _date[_date.length - 1]
            newStockRanking(_date, setTable)
        }

    }

    function formatMoney(money) {
        //金钱转换
        if (money > 0) {
            if (money / 10000 > 10000) {
                return (money / 100000000).toFixed(2) + "亿"
            } else if (money / 10000 > 1) {
                return (money / 10000).toFixed(0) + "万"
            }
        } else {
            money = Math.abs(money);
            if (money / 10000 > 10000) {
                return "-" + (money / 100000000).toFixed(2) + "亿"
            } else if (money / 10000 > 1) {
                return "-" + (money / 10000).toFixed(0) + "万"
            }
        }
    }

    // 获取最近几个交易日日期
    function historyDateEastmoney() {
        var m_data = []
        $.ajax({
            url: 'https://push2his.eastmoney.com/api/qt/stock/kline/get?cb=jQuery351020143393668275844_1674273725401&secid=0.000001&ut=fa5fd1943c7b386f172d6893dbfba10b&fields1=f1&fields2=f51&klt=101&fqt=1&end=20500101&lmt=1000000&_=1674273725455 ',
            type: 'GET',
            async: false,//同步
            dataType: 'text',
            // contentType: 'application/json; charset=UTF-8',
            success: function (data) {
                // var data = eval('(' + data + ')')['klines'];
                // console.log(data);
                var regex3 = /\{\"code\".*\]\}/  // {} 花括号，大括号
                data = data.match(regex3)[0]
                data = JSON.parse(data)["klines"]//JSON格式化
                // console.log(data);
                m_data = data
            },
            error: function (msg) {
                console.log(msg);
            }
        })
        return m_data
    };

    // 设置表格
    function setTable(data) {
        all_theme = [];
        var m_html = ""
        var m_th = ""
        var m_list = data['list']
        for (var i_row = 0; i_row < m_list.length; i_row++) {
            if (i_row % 2 == 0) {
                m_html += "<tr>"
            } else {
                m_html += "<tr class=\"cur\">"
            }
            if (m_list[i_row][0].slice(0, 1) == '3' || m_list[i_row][0].slice(0, 3) == '688') {
                m_html += "<td class=\"red  td1 over-chart\" data-name=\"" + m_list[i_row][1] + "\" data-sid=\"" + m_list[i_row][0] + "\" data-ct=\"big\">" + m_list[i_row][1] + "</td>" //设置股票的颜色
            } else {
                m_html += "<td class=\" td1 over-chart\" data-name=\"" + m_list[i_row][1] + "\" data-sid=\"" + m_list[i_row][0] + "\" data-ct=\"big\">" + m_list[i_row][1] + "</td>" //设置股票的颜色
            }

            // 设置涨幅颜色
            if (m_list[i_row][6] > 0) {
                //判断是否涨停
                if (m_list[i_row][23].indexOf('板') != -1) {
                    m_html += "<td class=\"red rbnews\">" + m_list[i_row][6] + "</td>"
                } else {
                    m_html += "<td class=\"red\">" + m_list[i_row][6] + "</td>"
                }
            } else {
                m_html += "<td class=\"gre\">" + m_list[i_row][6] + "</td>"
            }
            // 设置涨速颜色
            if (m_list[i_row][9] > 0) {
                m_html += "<td class=\"red\">" + m_list[i_row][9] + "</td>"
            } else {
                m_html += "<td class=\"gre\">" + m_list[i_row][9] + "</td>"
            }

            m_html += "<td>" + formatMoney(m_list[i_row][7]) + "</td>"//成交额
            m_html += "<td>" + m_list[i_row][4] + "</td>"//成交额
            m_html += "</tr>"
        }
        var tb = document.getElementById('table-list'); //获取表格的dom节点
        if (m_list.length == 0) {
            tb.innerHTML = m_th + ''
        } else
            tb.innerHTML = m_th + m_html

        $("#table-list-sort").trigger("update");//ajax动态生成table时，jquery的tablesorter失效问题   
    }
</script>

</html>